<template>
    <div class="float-view">
        <div @click="shouwUserInfo">
            <el-icon class="svg-style"><i-mdi-user /></el-icon>
        </div>
        <div ref="totop" @click="scrollToTop" style="display: none">
            <el-icon class="svg-style"><i-mdi-arrow-top /></el-icon>
        </div>
    </div>
    <el-drawer v-model="drawer" direction="rtl">
        <template #header>
            <!-- <div style="border-bottom: 1px solid #f0f0f2;">
            <h4>用户信息</h4>
        </div> -->
            <h2>用户信息</h2>
        </template>
        <template #default>
            <div v-if="isLogin == true">
                <ul class="info-block">
                    <li>
                        <div>用户名称</div>
                        <div>{{ userInfo.username }}</div>
                    </li>
                    <li>
                        <div>手机号码</div>
                        <div>{{ userInfo.phone }}</div>
                    </li>
                    <li>
                        <div>邮箱地址</div>
                        <div>{{ userInfo.useremail }}</div>
                    </li>
                    <li>
                        <div>所在单位</div>
                        <div>{{ userInfo.unit }}</div>
                    </li>
                    <li>
                        <div>课题组名</div>
                        <div>{{ userInfo.rpgname }}</div>
                    </li>
                    <li>
                        <div>剩余积分</div>
                        <div>
                            <a href="" class="score">{{ userInfo.point }}</a>
                        </div>
                    </li>
                </ul>
                <p>点击剩余积分，可兑换礼品</p>
            </div>
            <div v-else><p>请先登录</p></div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelClick">取消</el-button>
                <el-button type="primary" @click="confirmClick">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const drawer = ref(false);
const totop = ref();
const isLogin = ref();
// 取消按钮
function cancelClick() {
    drawer.value = false;
}
// 确认按钮
function confirmClick() {
    drawer.value = false;
}
let userInfo = ref({
    username: '',
    phone: '',
    useremail: '',
    unit: '',
    rpgname: '',
    point: '',
});

const scrollToTop = () => {
    window.scrollTo({
        top: 0, //回到顶部
        left: 0,
        behavior: 'smooth', //smooth 平滑；auto:瞬间
    });
};

onMounted(() => {
    // 页面滚动窗口监听事件
    window.onscroll = function () {
        // 获取浏览器卷去的高度
        let high = document.documentElement.scrollTop || document.body.scrollTop; //兼容各浏览器
        if (high >= 900) {
            totop.value.style.display = 'block';
        } else {
            totop.value.style.display = 'none';
        }
    };
});
let shouwUserInfo = () => {
    drawer.value = true;

    let localData = localStorage.getItem('userStore');
    userInfo.value = JSON.parse(localData).userInfo;
    isLogin.value = JSON.parse(localData).isLogin;
};
</script>

<style lang="scss" scoped>
.float-view {
    position: fixed;
    display: flex;
    z-index: 9;
    right: 25px;
    bottom: 125px;
    width: 40px;

    flex-direction: column;
    // background-color: $blue4;
    // border: 1px solid red;
    div {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #ffffff;
        box-shadow: 2px 2px 6px 0 hsla(0, 0%, 85.1%, 0.62);
        margin-bottom: 10px;
        cursor: pointer;
    }
    .svg-style {
        margin-top: 7px;
        margin-left: 7px;
        font-size: 26px;
        color: $blue2;
        margin-right: 9px;
        vertical-align: -24%;
    }

    div:hover {
        background-color: $blue2;
        .svg-style {
            color: #ffffff;
        }
    }
}

.info-block li {
    display: flex;
    font-size: 16px;
    div:first-child {
        width: 72px;
        height: 24px;
        margin-right: 40px;
        padding-bottom: 16px;
        color: #555666;
    }

    div:last-child {
        color: #222226;
    }
}

/* 积分兑换提示 */
.info-block + p {
    height: 42px;
    line-height: 42px;
    text-indent: 22px;
    border-radius: 4px;
    background-color: #ebf5ff;
}

.score {
    &:hover {
        color: #0b447d;
        text-decoration: underline;
    }
}
</style>
